<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>openLookeng2021年度报告</title>
</head>
<link rel="stylesheet" href="./css/common.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="./js/swiper.js"></script>
<script src="./js/axios.js"></script> 
<script src="https://openlookeng.io/common/jquery-3.1.1.min.js"></script> 
<link rel="stylesheet" href="./css/pc.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/new.css">

<body> 
    <a href="https://openlookeng.io/en/2021summary/" class="changeLanguages"></a>
    <div class="pc-box" id="pcBox"></div>
    <div class="mob-box swiper" id="outer-container"> </div>
    <div class="bgmMusic">
        <img src="./images/bg-music.svg">
    </div>
    <audio id="bgm" src="./images/bgm.mp3" autoplay="autoplay" preload loop></audio>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement('script');
            hm.src = 'https://hm.baidu.com/hm.js?d5f7e2406b6ef91d4494f0c6ea829f91';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // 适配safair
        function safariHacks() {
            let windowsVH = window.innerHeight / 100;
            console.log(windowsVH);
            document.querySelector('#outer-container').style.setProperty('--vh', windowsVH + 'px');
            window.addEventListener('resize', function () {
                document.querySelector('#outer-container').style.setProperty('--vh', windowsVH + 'px');
            });
        }

        safariHacks(); 
        let container = document.querySelector('#outer-container');
        let pcBox = $('#pcBox');

        $(function(){
            // 播放音乐  
            var audio = document.getElementById('bgm');
            let isVideo = true 
            container.addEventListener('pointerup',function(){   
                if(isVideo){
                    $(".bgmMusic").addClass("active")
                    audio.play();
                    isVideo = false
                } 
            },true) 

            $(".bgmMusic").bind("click", function() {
                if(audio !== null) {   
                    if(audio.paused) {
                        audio.play(); 
                        $(".bgmMusic").addClass("active")
                    } else {
                    
                        audio.pause();  
                        $(".bgmMusic").removeClass("active")
                    }
                }
            }) 

              

        })
 
        // 获取数据
        var isDataContribution = false;
        axios.get('/zh/2021summary/oauth2/userinfo').then(res => {
            return getData(res.data.user)
        }).catch(err => { 
            console.log(err);
            isDataContribution = true 
        })
        // getData('ailoooong')
        function getData(user) {
            let data = [] 
            axios.get(`https://omapi.osinfra.cn/query/newYear/2022?community=openlookeng&user=${user}`).then(res => { 
                let percentage = 0;
                if(res.data.data[0]){
                    isDataContribution = false
                    data = res.data.data[0];   
                    percentage = parseFloat(data.beat_percentage) * 100;
                }else{
                    isDataContribution = true
                } 
                

                let pcDom = `
                    <div class="container box-one"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-tow"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-three"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-four"><div class="front"></div><div class="back"></div></div>
                `;

                let pcDomNoData = `
                    <div class="container box-1"><div class="front"></div><div class="back"></div></div> 
                    <div class="container box-2"><div class="front"></div><div class="back"></div></div>
                `; 

                //isPcContribution \ isH5Contribution 判断有无贡献 
                let isPcContribution = false,
                    isH5Contribution = false;  
                
                if(isDataContribution){
                    pcBox.addClass('no-contribution').empty().html(pcDomNoData) ;
                    isPcContribution = true;
                    isH5Contribution = true;
                }else{
                    pcBox.removeClass('no-contribution').empty().html(pcDom);
                    isPcContribution = false;
                    isH5Contribution = false; 
                }

                intaPc(data, percentage,isPcContribution);
                intaSwiper(data, percentage, isH5Contribution); 
            })
        }  

        function timeChange(time) {
            if (time) {
                let EndTime = new Date(time);
                let y = EndTime.getFullYear();
                let m = EndTime.getMonth() + 1;
                let d = EndTime.getDate();
                let h = EndTime.getSeconds()
                let all = `${y}年${m}月${d}日`
                return all
            } else {
                return 'none'
            } 
        }

        // pc端事件
        function intaPc(data, percentage,isPcContribution) {
            let front = document.querySelectorAll(".front");
            let back = document.querySelectorAll(".back"); 
            pcBox.find('.front').click(function(){ 
                for (let i = 0; i < front.length; i++) {
                    let list = []  
                    if(isPcContribution){
                        list[0] =`<div class="contents">
                                        <div class="page page-one">
                                            <div class="text-box"> 
                                                <div class="ani1">
                                                    <p class="fz16">您的2021专属日历正在派件中</p>
                                                    <p class="fz16 mb10">请注意查收！</p>
                                                    <p class="fz14">Dear</p>
                                                    <p class="cOrange fz16 mb10 "> ${data.user_login}</p>
                                                    <p class="one-text">“登山则情满于山，观海则意溢于海”</p>
                                                    <p class="one-text">2021年，乘风破浪，砥砺前行</p>
                                                    <p class="one-text">总结2021，才能更好地迎接2022</p>
                                                    <p class="one-text mb10">2021年进度条已加载100%</p>
                                                    <p class="one-text ">2020年6月30日，数据虚拟化引擎openLooKeng破土而出</p>
                                                    <p class="one-text">至今，openLooKeng社区用户数达到<span class='cOrange fz14'>100K+</span></p>
                                                    <p class="one-text">累计收到<span class='cOrange fz14'>2K+</span>PR，</p>
                                                    <p class="one-text"><span class='cOrange fz14'>1.5K+</span>issue</p>
                                                    <p class="one-text"><span class='cOrange fz14'>27.9K+</span>Comments</p>
                                                    <p class="one-text">社区下载量突破<span class='cOrange fz14'>100K+</span>；</p>
                                                    <p class="one-text mb12">遍及全球<span class='cOrange fz14'>41</span>个国家，<span class='cOrange fz14'>210</span>个城市</p>

                                                    <p class="one-text">如今，社区呈现一派生机勃勃，绿荫环绕的景象</p>
                                                    <p class="cOrange fz16">新的一年，期待您的加入</p>
                                                    <p class="one-text">关注社区动态，打卡更多知识点</p>
                                                    <p class="one-text">共建大数据繁荣生态</p>

                                                </div>
                                            </div>
                                            <div class="people">
                                                <img src="./images/item1/img4.png" alt="">
                                                <img src="./images/item1/img1.png" alt="">
                                                <img src="./images/item1/img2.png" alt="">
                                            </div> 
                                        </div>
                                    </div>`
                        list[1] =`<div class="contents">
                                    <div class="page page-six">
                                        <div class="main">
                                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                                            <div class="text-box">
                                                <p class="">2021，期待您与社区更多的互动</p>
                                                <p class="">万里星光，一如既往</p>
                                                <p class="">让更多人看见闪闪发光的您</p>
                                                <p class="">靠近光，散发光，成为光！</p>
                                                <p class="">新年快乐！</p>
                                                <p class="bold" style="margin: 20px 0 0;">openLooKeng社区</p>
                                                <p class="bold " style="margin:0 0 10px ;">呈上</p>

                                                <img src="./images/code.png" class='codeImg' alt=""> 
                                                <p class="">查看您的社区年度报告</p>
                                            </div>
                                        </div>
                                        <div class="bg-six">
                                            <div class="footer">
                                                <img src="./images/item6/女+猫.png" alt="">
                                            </div>
                                            <div class="border"> </div>
                                        </div> 
                                    </div>
                                </div>`
                    }else{
                        list[0] = `<div class="contents">
                                        <div class="page page-one">
                                            <div class="text-box"> 
                                                <div class="ani1">
                                                    <p class="fz16">您的2021专属日历正在派件中</p>
                                                    <p class="fz16 mb20">请注意查收！</p>
                                                    <p class="fz14">Dear</p>
                                                    <p class="cOrange fz16 mb20 "> ${data.user_login}</p>
                                                    <p class="one-text">“登山则情满于山，观海则意溢于海”</p>
                                                    <p class="one-text">2021年，乘风破浪，砥砺前行</p>
                                                    <p class="one-text">总结2021，才能更好地迎接2022</p>
                                                    <p class="one-text mb30">2021年进度条已加载100%</p>
                                                    <p class="fz14 fb">在2021社区日历里，</p>
                                                    <p class="fz14 fb mb12">藏着一些您与社区的有趣互动</p>
                                                    <p class="one-text">故事开始于<span class='cOrange fb'>${timeChange(data.first_time_of_enter)}</span></p>
                                                    <p class="one-text">您与openLooKeng的第一次相遇</p>
                                                    <p class="one-text">乍见之欢，久处不厌</p>
                                                    <p class="one-text">因为您的加入，让很多的瞬间都值得被纪念</p>
                                                </div>
                                            </div>
                                            <div class="people">
                                                <img src="./images/item1/img4.png" alt="">
                                                <img src="./images/item1/img1.png" alt="">
                                                <img src="./images/item1/img2.png" alt="">
                                            </div> 
                                        </div>
                                    </div> `
                        list[1] = `<div class="contents">
                                        <div class="page page-three">
                                            <div class="panel2-top">
                                                <img src="./images/item2/img10.png" alt="">
                                                <img src="./images/item2/img7.png" alt="">
                                            </div>
                                            <h3 class="fz16 mb20">2021，您与社区互动频繁</h3>
                                            <div class="panel2-box">  
                                                ${(function(){  
                                                    let dom = '';
                                                    if(data.first_time_of_contact != ''){
                                                        dom = dom+  `
                                                        <p class='fade fade-time-1'><span class="cGreen ">${timeChange(data.first_time_of_contact)}</span></p> 
                                                        <p class='fade fade-time-2'>您与<span class="cRed">${data.first_user_login_of_contact}</span>产生了第一次链接</p>
                                                        `
                                                    } 
                                                     if(data.first_time_of_comment_other != ''){
                                                        dom = dom+ `<p class='fade fade-time-3'><span class="cGreen">${timeChange(data.first_time_of_comment_other)}</span></p>
                                                            <p class='fade fade-time-4'>您在<span class="cRed">${data.first_user_login_of_comment}</span>下进行了第一次评论</p>`
                                                    } 
                                                     if(data.user_login_with_most_contact != ''){
                                                        dom = dom+ `<p class='fade fade-time-5'><span class="cGreen">这一年</span></p><p class='fade fade-time-6'>您与<span class="cRed">${data.user_login_with_most_contact}</span>的联系最频繁 </p> `
                                                    }
                                                     if(data.first_user_login_of_be_comment != ''){
                                                        dom = dom+ `<p class='fade fade-time-7'><span class="cGreen">${timeChange(data.first_time_of_be_comment)}</span></p>
                                                            <p class='fade fade-time-8'>这是很特别的一天</p>
                                                            <p class='fade fade-time-9'><span class="cRed">${data.first_user_login_of_be_comment}</span>第一个给了您温暖的评论</p>  `
                                                    } 
                                                    return dom;
  
                                                })()}  
                                                
                                            </div>
                                            <div class="panel2-bottom">
                                                <img src="./images/item2/女.png" alt="">
                                                <img src="./images/item2/虚线.png" alt="">
                                                <p class="img3"><span></span></p>
                                            </div> 
                                        </div>
                                    </div>`
                        list[2] = `<div class="contents">
                                        <div class="page ">
                                            <div class="panel3-box"> 
                                                <p class="fb fz14 fade fade-time-1">2021，您与社区交相辉映</p>
                                                <p class="fb fz14 fade fade-time-2" style="margin:5px 0">这一年</p>
                                                <p class="mb20 fade fade-time-3">
                                                    ${(function(){
                                                        let dom ='' 
                                                         if(data.pr_num != '0'){
                                                            dom = dom+ `提交了<span class="fb fz14 cOrange">${data.pr_num }</span>个PR<br>`
                                                        }
                                                         if( data.issue_num != '0'){
                                                            dom = dom+ `提出了<span class="fb fz14 cOrange">${data.issue_num }</span>个issue<br>`
                                                        } 
                                                        if( data.code_lines != '0'){
                                                            dom = dom+ `贡献了<span class="fb fz14 cOrange">${data.code_lines}</span>行代码<br>`
                                                        }
                                                         if ( data.star_num != '0'){
                                                            dom = dom+ `点亮了<span class="fb fz14 cOrange">${data.star_num}</span>个代码仓库<br>`
                                                        } 
                                                        return dom ;
                                                    })()} 

                                                    您在社区的海洋，贡献的每一个代码<br>
                                                    都饱含对开源生态的见解和期待</p>
                                                <p class="mb12 fade fade-time-4"> 2021注定是不平凡的一年<br> 您在社区的贡献度超过了<span class="fb fz14 cOrange">${percentage} % </span>的开发者 </p>
                                                ${(function(){  
                                                    let dom = '';
                                                    if(percentage<=10 ){
                                                        dom =  `
                                                        <p class="fb fz14 fade fade-time-5">2022，您将以<span class="fz16 cOrange">新手型</span>选手身份出道</p>
                                                        <div class="code-box"> 
                                                            <img src="./images/新手型@2x.png" alt="">
                                                        </div>
                                                        <p class="fz14 fb cOrange ">路漫漫其修远兮，吾将上下而求索</p>
                                                        `    
                                                    }else if(percentage>10 && percentage<=30 ){
                                                        dom =`
                                                        <p class="fb fz14 fade fade-time-5">2022，您将以<span class="fz16 cOrange">进击型</span>选手身份出道</p>
                                                        <div class="code-box">
                                                            <img src="./images/进击型@2x.png" alt="">
                                                        </div>
                                                        <p class="fz14 fb cOrange ">路见bug一声吼，该出手时就出手</p>
                                                        `    
                                                    }else if(percentage>30 && percentage<=60 ){
                                                        dom =`
                                                        <p class="fb fz14 fade fade-time-5">2022，您将以<span class="fz16 cOrange">思考型</span>选手身份出道</p>
                                                        <div class="code-box">
                                                            <img src="./images/思考型@2x.png" alt="">
                                                        </div>
                                                        <p class="fz14 fb cOrange ">古之成大事者，不唯有超世之才，亦有坚忍不拔之志</p>
                                                        `    
                                                    }else if(percentage >60 ){
                                                        dom =  `
                                                        <p class="fb fz14 fade fade-time-5">2022，您将以<span class="fz16 cOrange">天赋型</span>选手身份出道</p>
                                                        <div class="code-box">
                                                            <img src="./images/天赋型@2x.png" alt="">
                                                        </div>
                                                        <p class="fz14 fb cOrange ">会当凌绝顶，一览众山小</p>
                                                        `   
                                                    }
                                                    return dom;
                                                })()} 
                                                <img class="fj" src="./images/item3/fj.png" alt="">
                                            </div> 

                                        </div>
                                    </div>
                                    
                                    `
                        list[3] = `<div class="contents">
                                    <div class="page page-six">
                                        <div class="main">
                                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                                            <div class="text-box ">
                                                <p class="typing">2021，感谢您在社区留下的星光点点。</p>
                                                <p class="typing delay-time1">2022，社区将继续与您并肩前行</p>
                                                <p class="typing delay-time2">万里星光，一如既往</p>
                                                <p class="typing delay-time3 ">新年快乐！</p>
                                                <p class="bold" style="margin: 40px 0 0;">openLooKeng社区</p>
                                                <p class="bold">呈上</p>
                                            </div>
                                        </div>
                                        <div class="bg-six">
                                            <div class="footer">
                                                <img src="./images/item6/女+猫.png" alt="">
                                            </div>
                                            <div class="border"> </div>
                                        </div> 
                                    </div>
                                </div>
                                `
                    }
                    back[i].innerHTML = list[i]  
                }
                pcBox.find('.front').css({transform:'rotateY(-180deg)'}) 
                pcBox.find('.back').css({transform:'rotateY(0deg)'})
            }) 
        }
        
        // 移动端事件
        let swper = null;
        function intaSwiper(data, percentage,isH5Contribution) {
            let list = []  
            if(isH5Contribution){
                $('#outer-container').addClass('no-h5-contribution')
                list = [{
                    content: `
                    <div class="page page-one">
                        <div class="text-box"> 
                            <div class="ani1">
                                <p class="fz16">您的2021专属日历正在派件中</p>
                                <p class="fz16 mb12">请注意查收！</p>
                                <p class="fz14">Dear</p>
                                <p class="cOrange fz16 mb12 ">${data.user_login}</p>
                                <p class="one-text">“登山则情满于山，观海则意溢于海”</p>
                                <p class="one-text">2021年，乘风破浪，砥砺前行</p>
                                <p class="one-text">总结2021，才能更好地迎接2022</p>
                                <p class="one-text ">2021年进度条已加载100%</p>
                                <p class="one-text ">2020年6月30日，数据虚拟化引擎openLooKeng破土而出</p>
                            </div>
                            <div class="video-temp">  
                                <img src="./images/item1/img6.png" alt="">
                                <img src="./images/item1/img3.png" alt="">
                            </div>
                        </div>
                        <div class="people">
                            <img src="./images/item1/img4.png" alt="">
                            <img src="./images/item1/img1.png" alt="">
                            <img src="./images/item1/img2.png" alt="">
                        </div> 
                    </div>
                    `
                }, {
                    content: ` 
                    <div class="page page-three" >
                        <div class="contents">
                            <div class="page page-three">
                                <div class="panel2-top">
                                    <img src="./images/item2/img10.png" alt="">
                                    <img src="./images/item2/img7.png" alt="">
                                </div> 
                                <div class="panel2-box">  
                                    <p class="one-text">至今，openLooKeng社区用户数达到<span class='cOrange fz14'>100K+</span></p>
                                    <p class="one-text">累计收到<span class='cOrange fz14'>2K+</span>PR，</p>
                                    <p class="one-text"><span class='cOrange fz14'>1.5K+</span>issue</p>
                                    <p class="one-text"><span class='cOrange fz14'>27.9K+</span>Comments</p>
                                    <p class="one-text">社区下载量突破<span class='cOrange fz14'>100K+</span>；</p>
                                    <p class="one-text mb12">遍及全球<span class='cOrange fz14'>41</span>个国家，<span class='cOrange fz14'>210</span>个城市</p>

                                    <p class="one-text">如今，社区呈现一派生机勃勃，绿荫环绕的景象</p>
                                    <p class="one-text"><span class="cOrange fz16">新的一年，期待您的加入</span></p>
                                    <p class="one-text">关注社区动态，打卡更多知识点</p>
                                    <p class="one-text">共建大数据繁荣生态</p>  
                                </div>
                                <div class="panel2-bottom">
                                    <img src="./images/item2/女.png" alt="">
                                    <img src="./images/item2/虚线.png" alt="">
                                    <p class="img3"><span></span></p>
                                </div> 
                            </div>
                        </div>
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-six">
                        <div class="main">
                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                            <div class="text-box ">
                                <p class="typing">2021，感谢您在社区留下的星光点点。</p>
                                <p class="typing delay-time1">2022，社区将继续与您并肩前行</p>
                                <p class="typing delay-time2">万里星光，一如既往</p>
                                <p class="typing delay-time3 ">新年快乐！</p>
                                <p class="bold" style="margin: 40px 0 0;">openLooKeng社区</p>
                                <p class="bold">呈上</p>
                            </div>
                        </div>
                        <div class="bg-six">
                            <div class="footer">
                                <img src="./images/item6/女+猫.png" alt="">
                            </div>
                            <div class="border"> </div>
                        </div> 
                    </div> 
                    `
                }]
            }else{
                $('#outer-container').removeClass('no-h5-contribution')
                list = [{
                    content: `
                    <div class="page page-one">
                        <div class="text-box"> 
                            <div class="ani1">
                                <p class="fz16">您的2021专属日历正在派件中</p>
                                <p class="fz16 mb12">请注意查收！</p>
                                <p class="fz14">Dear</p>
                                <p class="cOrange fz16 mb12 ">${data.user_login}</p>
                                <p class="one-text">“登山则情满于山，观海则意溢于海”</p>
                                <p class="one-text">2021年，乘风破浪，砥砺前行</p>
                                <p class="one-text">总结2021，才能更好地迎接2022</p>
                                <p class="one-text ">2021年进度条已加载100%</p>
                                <p>向下滑动，即刻访问您的<span class="fz14 fb cOrange">【2021社区日历】</span></p>
                            </div>
                            <div class="video-temp">  
                                <img src="./images/item1/img6.png" alt="">
                                <img src="./images/item1/img3.png" alt="">
                            </div>
                        </div>
                        <div class="people">
                            <img src="./images/item1/img4.png" alt="">
                            <img src="./images/item1/img1.png" alt="">
                            <img src="./images/item1/img2.png" alt="">
                        </div> 
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-tow">
                        <div class="text-box ani1">
                            <p class="fz16">在2021社区日历里，</p>
                            <p class="fz16 mb30">藏着一些您与社区的有趣互动</p> 
                            <p>故事开始于<span class="fz14 cOrange">${timeChange(data.first_time_of_enter)} </span></p>
                            <p>您与openLooKeng的第一次相遇</p>
                            <p>乍见之欢，久处不厌</p>
                            <p>因为您的加入，让很多的瞬间都值得被纪念</p>
                        </div>
                        <div class="panel-mo2">
                            <img src="./images/item2/男+绿色块.png" alt="">
                            <img src="./images/item2/虚线1.png" alt="">
                            <img src="./images/item2/女1.png" alt="">
                            <img src="./images/item2/对半色圆饼+绿色箭头.png" alt="">
                            <img src="./images/item2/纸飞机.png" alt="">
                        </div>
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-three" >
                        <div class="contents">
                            <div class="page page-three">
                                <div class="panel2-top">
                                    <img src="./images/item2/img10.png" alt="">
                                    <img src="./images/item2/img7.png" alt="">
                                </div>
                                <h3 class="fz16 mb20">2021，您与社区互动频繁</h3>
                                <div class="panel2-box">
                                    ${(function(){  
                                        let dom = '';
                                        if(data.first_time_of_contact != ''){
                                            dom=dom+  ` <p class='fade fade-time-1'><span class="cGreen ">${timeChange(data.first_time_of_contact)}</span></p> 
                                            <p class='fade fade-time-2'>您与<span class="cRed">${data.first_user_login_of_contact}</span>产生了第一次链接</p> `

                                        } 
                                         if(data.first_time_of_comment_other != ''){
                                            dom=dom+ `<p class='fade fade-time-3'><span class="cGreen">${timeChange(data.first_time_of_comment_other)}</span></p>
                                                <p class='fade fade-time-4'>您在<span class="cRed">${data.first_user_login_of_comment}</span>下进行了第一次评论</p>`

                                        } 
                                         if(data.user_login_with_most_contact != ''){
                                            dom=dom+ `<p class='fade fade-time-5'><span class="cGreen">这一年</span></p><p class='mb20 fade fade-time-6'>您与<span class="cRed">${data.user_login_with_most_contact}</span>的联系最频繁 </p> `

                                        }
                                         if(data.first_user_login_of_be_comment != ''){
                                            dom=dom+ `<p class='fade fade-time-7'><span class="cGreen">${timeChange(data.first_time_of_be_comment)}</span></p>
                                                <p class='fade fade-time-8'>这是很特别的一天</p>
                                                <p class='fade fade-time-9'><span class="cRed">${data.first_user_login_of_be_comment}</span>第一个给了您温暖的评论</p>  `
                                                
                                        } 
                                        return dom;

                                    })()}  
 
                                </div>
                                <div class="panel2-bottom">
                                    <img src="./images/item2/女.png" alt="">
                                    <img src="./images/item2/虚线.png" alt="">
                                    <p class="img3"><span></span></p>
                                </div> 
                            </div>
                        </div>
                    </div>   `
                }, {
                    content: `
                        <div class="page page-four">
                            <div class="panel-mo4">
                                <img src="./images/item4/img1.png" alt="">
                                <img src="./images/item4/一男一女.png" alt="">
                                <img src="./images/item4/双人组合.png" alt="">
                                <img src="./images/item4/男.png" alt="">
                                <img src="./images/item4/纸飞机.png" alt="">
                            </div>
                            <div class="text-box">
                                <p class="fade fade-time-1">2021，您与社区交相辉映</p>
                                <p class="fade fade-time-2">这一年</p> 
                                 <p class="fade fade-time-3"> 
                                    ${(function(){
                                        let dom ='' 
                                            if( data.pr_num != '0'){
                                            dom = dom+ `提交了<span class="fb fz14 cOrange">${data.pr_num }</span>个PR<br>`
                                        }
                                            if( data.issue_num != '0'){
                                            dom = dom+ `提出了<span class="fb fz14 cOrange">${data.issue_num }</span>个issue<br>`
                                        } 
                                        if( data.code_lines != '0'){
                                            dom = dom+ `贡献了<span class="fb fz14 cOrange">${data.code_lines}</span>行代码<br>`
                                        }
                                            if ( data.star_num != '0'){
                                            dom = dom+ `点亮了<span class="fb fz14 cOrange">${data.star_num}</span>个代码仓库<br>`
                                        } 
                                        return dom ;
                                    })()}
                                </p>
                                <p class="fade fade-time-4">您在社区的海洋，贡献的每一个代码</p>
                                <p class="fade fade-time-5">都饱含对开源生态的见解和期待</p>
                            </div>
                        </div>   
                    `
                }, {
                    content: `
                        <div class="page page-five"> 
                            <div class="panel3-box">   
                                <p class=" mb12 ">Dear <span class='cOrange fz16'>${data.user_login}</span></p>
                            <p class="mb12"> 2021注定是不平凡的一年<br> 
                                您在社区的贡献度超过了<span class="fb fz14 cOrange">${percentage} %</span>的开发者 </p> 
                            ${(function(){ 
                                let dom ='';
                                    if(percentage<=10 ){
                                        dom = `
                                            <p class="fb fz14">2022，您将以<span class="fz16 cOrange">新手型</span>选手身份出道</p>
                                            <div class="code-box"> 
                                                <img src="./images/新手型@2x.png" alt="">
                                            </div>
                                            <p class="fz14 fb cOrange ">路漫漫其修远兮，吾将上下而求索</p>
                                        `    
                                    }else if(percentage>10 && percentage<30 ){
                                        dom = `
                                            <p class="fb fz14">2022，您将以<span class="fz16 cOrange">进击型</span>选手身份出道</p>
                                            <div class="code-box"> 
                                                <img src="./images/进击型@2x.png" alt="">
                                            </div>
                                            <p class="fz14 fb cOrange ">路见bug一声吼，该出手时就出手</p>
                                        `    
                                    }else if(percentage>30 && percentage<=60 ){
                                        dom = `
                                            <p class="fb fz14">2022，您将以<span class="fz16 cOrange">思考型</span>选手身份出道</p>
                                            <div class="code-box"> 
                                                <img src="./images/思考型@2x.png" alt="">
                                            </div>
                                            <p class="fz14 fb cOrange ">古之成大事者，不唯有超世之才，亦有坚忍不拔之志</p>
                                        `    
                                    }else if(percentage>60 ){
                                        dom = `
                                            <p class="fb fz14">2022，您将以<span class="fz16 cOrange">天赋型</span>选手身份出道</p>
                                            <div class="code-box"> 
                                                <img src="./images/天赋型@2x.png" alt="">
                                            </div>
                                            <p class="fz14 fb cOrange ">会当凌绝顶，一览众山小</p>
                                        `   
                                    }
                                    return dom;
                                })()}
                            </div> 
                            <div class="panel-mo5">
                                <img src="./images/item5/男.png" alt="">
                                <img src="./images/item5/share.png" alt="">
                                <img src="./images/item5/logo.png" alt="">
                                <div class="code-tile"> 
                                    <img src="./images/code.png" class='codeImg' alt=""> 
                                    <p>查看您的社区年度报告</p>
                                </div>
                                
                            </div> 
                    </div>    `
                }, {
                    content: `
                    <div class="page page-six">
                        <div class="main">
                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                            <div class="text-box ">
                                <p class="typing">2021，感谢您在社区留下的星光点点。</p>
                                <p class="typing delay-time1">2022，社区将继续与您并肩前行</p>
                                <p class="typing delay-time2">万里星光，一如既往</p>
                                <p class="typing delay-time3 ">新年快乐！</p>
                                <p class="bold" style="margin: 40px 0 0;">openLooKeng社区</p>
                                <p class="bold">呈上</p>
                            </div>
                        </div>
                        <div class="bg-six">
                            <div class="footer">
                                <img src="./images/item6/女+猫.png" alt="">
                            </div>
                            <div class="border"> </div>
                        </div> 
                    </div>  `
                }]

            }
            swiper = new Swiper({
                container: container,
                data: list,
            });
        }
    </script>
</body>

</html>